<template>
    <div ref="container"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { IDate } from '../../interface';
import { Chart } from '@antv/g2';

const p = defineProps<{ data: IDate[] }>()
const container = ref()

const _chart = ref<Chart>()

onMounted(() => {
    const chart = new Chart({
        container: container.value,
        autoFit: true,
        height: 200,
        // padding: [35, 35, 70, 50]
    });
    _chart.value = chart
    start()
    chart.render()

})

function start() {
    _chart.value?.clear()
    _chart.value?.changeData(p.data);
    // chart.value?.theme({ "styleSheet": { "brandColor": "#014c63", paletteQualitative10: prop.color, paletteQualitative20: prop.color } });
    // chart.value?.interval()
    //     .position('count')
    //     .color('name', prop.color)
    //     .label('name')
    //     .adjust('stack');

    _chart.value?.annotation()
        .text({
            position: ['50%', '50%'],
            content: '全评测',
            style: {
                fontSize: 16,
                fill: '#ffffff',
                textAlign: 'center',
                fontFamily: 'FZZongYi-M05S'
            },
            offsetY: -10,
        })
        .text({
            position: ['50%', '50%'],
            content: '题目标签',
            style: {
                fontSize: 16,
                fill: '#ffffff',
                textAlign: 'center',
                fontFamily: 'FZZongYi-M05S'
            },
            offsetY: 10,
        })
    _chart.value?.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}%</li>',
    });



    _chart.value?.scale('percent', {
        formatter: (val) => {
            val = val * 100 + '%';
            return val;
        },
    });
    _chart.value?.coordinate('theta', {
        radius: 0.8,
        innerRadius: 0.84,
    });



    _chart.value?.interval()
        .adjust('stack')
        .position('count')
        .color('day', ['l(360) 0:#FE8B16 1:#F84228', 'l(360) 0:#FCF100 1:#F5A300', 'l(360) 0:#FA76B7 1:#FB4099', 'l(360) 0:#50FE83 1:#1CDD5E', 'l(360) 0:#988FF9 1:#6A47C0', 'l(360) 0:#0670F8 1:#34C7FC'])


    _chart.value?.interaction('active-region').legend({
        position: 'right',
        itemName: {
            style: {
                fill: '#ffffff',
                lineHeight: 10,
                fontSize: 8,
            },
            formatter(text, item, index) {
                const count = p.data.find(e=> e.day === text)?.count
                return `${text} 
${count}%` 
            }
        },
        marker: {
            symbol: 'square',
        },
        // offsetY: -10,
        itemHeight: 16
    })
}

watch(() => p.data, () => {
    start()

    _chart.value?.render();
})

</script>